
import { ChangeDetectionStrategy, Component, input, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MenuSection } from '@shared/models/menu.models';
import { MenuLinkComponent } from './menu-link.component';

@Component({
  selector: 'cne-menu-toggle',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatIconModule,
    MatButtonModule,
    MenuLinkComponent
  ],
  templateUrl: './menu-toggle.component.html',
  styleUrl: './menu-toggle.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MenuToggleComponent {
  // 使用 input() 函数替代 @Input() 装饰器
  section = input.required<MenuSection>();
  
  // 使用 signal 管理展开状态
  expandedState = signal<boolean>(false);
  
  // 计算属性：菜单高度 控制隐藏和显示
  sectionHeight = computed(() => {
    const section = this.section();
    const isExpanded = this.expandedState();
    if (isExpanded && section.pages) {
      return `${section.pages.length * 45}px`;
    }
    return '0px';
  });

  // 切换菜单展开状态
  toggleSection(event: MouseEvent): void {
    event.stopPropagation();
    this.expandedState.update(current => !current);
  }

  // TrackBy 函数
  trackBySectionPages(index: number, section: MenuSection): string {
    return section.id;
  }
}
